<template>
  <up-popup :show="show" mode="bottom" :round="10" @close="close">
		<view class='popup'>
      <view class="popup-header"></view>
      <view class="popup-content">
        <view class="title">
          <view class="label">门店充值，支付金额</view>
          <view class="value mt-[10rpx]">￥{{payMoney}}</view>
          
        </view>
        <view class="name">请选择支付方式</view>
        <up-radio-group class="row" v-model="payType">
          <view class="label">微信支付 <view class="ml-[10rpx]" style="color: #fc872d;">(手续费 -{{commission}})</view></view>
          <view class="radio">
            <up-radio name="wxpay" active-color="rgb(252, 135, 45)"></up-radio>
          </view>
        </up-radio-group>
      </view>
      <view class="popup-footer">
        <up-button color="rgb(252, 135, 45)" @click="handleSubmit">立即支付</up-button>
      </view>
		</view>
	</up-popup>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { wxPay } from '@/addon/htscrm/utils/qyCodeAuth';


const show = ref(false)
const payType = ref('wxpay')
const payMoney = ref(0)
const commission = ref('')
const payInfo = ref<IPayInfo>()

const emit = defineEmits(['success', 'fail'])
const close = () => {
	show.value = false
}
const open = (data: IPayInfo) => {
  show.value = true
  if(data) {
    payInfo.value = data
    payMoney.value = data.money
    commission.value = data.rate || '0.9%'
  }
}

async function handleSubmit() {
  if(!payInfo.value) return
  if(payInfo.value.type === 'fuyou_token') {
    window.location.href = payInfo.value.pay_data.token_url
    return
  }
  const { timeStamp, nonceStr, signType, paySign, package: p } = payInfo.value.pay_data
  const res = await wxPay({
    timestamp: timeStamp,
    nonceStr: nonceStr,
    package: p,
    signType: signType,
    paySign: paySign
  })
  if(!res.errCode) {
    // 支付成功
    uni.showToast({
      title: '支付成功'
    })
    show.value = false
    emit('success')
  } else {
    // 支付失败
    uni.showToast({
      title: '支付失败' + res.errCode
    })
    emit('fail')
  }
}


defineExpose({
  open,
  close
})
</script>

<style scoped lang="scss">
.popup {
  width: 100vw;
  background-color: #fff;

  .popup-header {
    padding: 30rpx;
    font-size: 30rpx;
    font-weight: bold;
    text-align: center
  }
  .popup-content {
    padding: 30rpx;
  }

  .popup-footer {
    padding: 30rpx;
  }

  .title {
    text-align: center;

    .label {
      color: #666;
    }

    .value {
      font-size: 50rpx;
      font-weight: bold;
      line-height: normal;
    }
  }

  .name {
    margin-top: 100rpx;
    color: #999;
  }

  .row {
    height: 100rpx;
    display: flex;
    align-items: center;
    .label {
      flex: 1;
      display: flex;
      align-items: center;

      &::before {
        content: "";
        width: 40rpx;
        height: 40rpx;
        background: url('https://static.fastht.com/h5_store/icon_wx_pay.jpg') center/100% no-repeat;
        margin-right: 10rpx;
      }
    }
  }
}
</style>